<!-- Work Schedule -->
<!-- Author: Edwin -->
<template>
  <el-card shadow="never"
           class="aui-card--fill">
    <div class='work-schedule'>
      <div style="display:flex;align-items:center;">
        <!-- <el-row :gutter="20">
        <el-col :span="4"> -->
        <div style="width:240px;margin-right:20px;" v-if="$hasPermission('sys:workschedule:templateSetting')">
          <select-dept-input @resetSearch="deptChange" />
        </div>
        <!-- </el-col>
        <el-col :span="4"> -->
        <div style="width:240px;margin-right:20px;">
          <select-user-input @resetSearch="userChange" />
        </div>
        <!-- </el-col>
        <el-col :span="16"> -->
        <el-button size="small"
                   @click="init">{{ $t('query') }}</el-button>
        <el-button v-if="$hasPermission('sys:workschedule:batchApply')"
                   type="primary"
                   size="small"
                   style="margin-left:20px;"
                   @click="applyTemplate">{{ $t('custom.workSchedule.batchApply') }}</el-button>
        <el-button v-if="$hasPermission('sys:workschedule:templateSetting')"
                   type="primary"
                   size="small"
                   style="margin-left:20px;"
                   @click="openDialogTemplateSetting">{{ $t('custom.workSchedule.templateSetting') }}</el-button>
        <el-button v-if="$hasPermission('sys:workschedule:enableAttendance')"
                   type="primary"
                   size="small"
                   style="margin-left:20px;"
                   @click="switchAttendance(true)">{{ $t('custom.workSchedule.enableAttendance') }}</el-button>
        <el-button v-if="$hasPermission('sys:workschedule:disableAttendance')"
                   type="primary"
                   size="small"
                   style="margin-left:20px;"
                   @click="switchAttendance(false)">{{ $t('custom.workSchedule.disableAttendance') }}</el-button>
        <!-- </el-col>
      </el-row> -->
      </div>
      <el-row style="margin-top:20px;">
        <el-col :span="24">
          <SchduleList ref="schedule-list"
                       :selectDeptList="selectedDept"
                       :selectUser="selectedUser" />
        </el-col>
      </el-row>
      <ScheduleDetailsDialog setType="save-batch-users"
                             :addTemplateDialog="addTemplateDialog"
                             :tenantCode="scheduleDetailsInfo.tenantCode"
                             :userId="scheduleDetailsInfo.userId"
                             :username="scheduleDetailsInfo.username"
                             :timezoneFull="scheduleDetailsInfo.timezoneFull"
                             :timezoneName="scheduleDetailsInfo.timezoneName"
                             :timezoneOffset="scheduleDetailsInfo.timezoneOffset"
                             :workScheduleList="scheduleDetailsInfo.workScheduleList"
                             :workSchedule="scheduleDetailsInfo.workSchedule"
                             :tenantUserId="scheduleDetailsInfo.tenantUserId"
                             :batchData="batchDataList"
                             @closeDialog="closeScheduleDetailsDialog" />
    </div>
    <TemplateSetting ref="template-setting" />
  </el-card>
</template>

<script>
import SchduleList from './schdule-list'
import SelectDeptInput from './select-dept-input'
import SelectUserInput from './select-user-input'
// import SelectUserInput from '@/components/search-input/select-user-input'
import ScheduleDetailsDialog from './schedule-details'
import TemplateSetting from './templateSetting'

export default {
  components: { SelectDeptInput, SelectUserInput, SchduleList, ScheduleDetailsDialog, TemplateSetting },
  data () {
    return {
      selectedDept: null,
      selectedUser: null,
      addTemplateDialog: false,
      scheduleDetailsInfo: {
        tenantCode: null,
        userId: null,
        username: null,
        timezoneFull: null,
        timezoneName: null,
        timezoneOffset: null,
        workScheduleList: [],
        workSchedule: {},
        tenantUserId: null
      },
      batchDataList: []
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    init () {
      this.$refs['schedule-list'].getScheduleList()
    },
    deptChange (e) {
      this.selectedDept = e
      this.init()
    },
    userChange (e) {
      this.selectedUser = e
      this.init()
    },
    applyTemplate () {
      let selectedList = this.$refs['schedule-list'].getScheduleSelected()
      if (selectedList.length === 0) {
        this.$message.error(this.$t('custom.tips.selectItem'))
        return false
      }
      this.batchDataList = selectedList
      this.openScheduleDetailsDialog(selectedList[0])
    },
    openDialogTemplateSetting () {
      this.$refs['template-setting'].openDialog()
    },
    openScheduleDetailsDialog (e) {
      this.scheduleDetailsInfo = e
      this.$nextTick(() => {
        this.addTemplateDialog = true
      })
    },
    closeScheduleDetailsDialog () {
      this.addTemplateDialog = false
    },
    switchAttendance (flag) {
      let selectedList = this.$refs['schedule-list'].getScheduleSelected()
      if (selectedList.length === 0) {
        this.$message.error(this.$t('custom.tips.selectItem'))
        return false
      }
      let userIds = selectedList.map(item => item.userId)
      let params = {
        userIds: userIds,
        attendanceFlag: flag
      }
      this.$interface.schedule.switchAttendanceApi(params)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          this.$message.success(res.msg)
          this.init()
        })
        .catch(() => { })
    }
  }
}
</script>

<style scoped>
</style>
